<template>
  <van-sticky>
    <van-nav-bar
      title="修改脉冲"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      safe-area-inset-top
    />
  </van-sticky>
  <div style="padding: 0 10px">
    <div class="grid-content" v-for="(item, index) in list" :key="index">
      <div class="grid-content-top-pic">
        <div class="flex">
          <div>
            <img class="imgage" src="../../../assets/images/shebei.png" />
          </div>
          <div style="margin-left: 10px; font-size: 12px">
            {{ item.deviceName }}
          </div>
        </div>
        <div class="grid-content-top-pic-right">
          <van-tag v-if="item.deviceStatus === 0" type="success" size="large"
            >在线</van-tag
          >
          <van-tag v-else type="danger" size="large">离线</van-tag>
        </div>
      </div>
      <div class="grid-content-top-dec">
        <p class="grid-content-top-dec-p">
          <span class="grid-content-top-dec-span"
            >店铺：{{ item.storeName }}</span
          >
          <span class="grid-content-top-dec-span"
            >创建日期：{{ item.createTime }}</span
          >
        </p>
        <p class="grid-content-top-dec-p">
          <span class="grid-content-top-dec-span"
            >地址：{{ item.detailedAddress }}</span
          >
        </p>
      </div>
    </div>
  </div>
  <div>
    <van-form
      @submit="onSubmit"
      input-align="right"
      error-message-align="right"
    >
      <van-cell-group inset>
        <van-field
          v-model="params.timeWidth"
          label="脉冲宽度"
          placeholder="请输入脉冲宽度"
          type="number"
          :min="1"
          :rules="[{ required: true, message: '请输入脉冲宽度' }]"
        />
        <van-field
          v-model="params.timeInterval"
          label="脉冲间隔"
          placeholder="请输入脉冲间隔"
          type="number"
          :min="1"
          :rules="[{ required: true, message: '请输入脉冲间隔' }]"
        />
        <van-field
          v-model="params.proportion"
          label="脉冲比例"
          placeholder="请输入脉冲比例"
          type="number"
          :min="1"
          :rules="[{ required: true, message: '请输入脉冲比例' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          保存设置
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { updateEntity } from "@/api/deviceEntity";
import { showToast } from "vant";
const route = useRoute();
const data = JSON.parse(route.params.data);
const list = [data];
const params = ref({
  id: data.id,
  timeInterval: data.timeInterval,
  timeWidth: data.timeWidth,
  proportion: data.proportion,
});
const onSubmit = async () => {
  try {
    const response = await updateEntity(params.value);

    if (response.status == 200) {
      showToast({
        type: "success",
        message: "修改成功",
        forbidClick: true,
        duration: 1000,
      });
      setTimeout(() => {
		onClickLeft();
      }, 1000);
    } else {
      showToast({
        type: "fail",
        message: response.desc || "修改失败",
        forbidClick: true,
        duration: 1000,
      });
    }
  } catch (error) {
    showToast({
      type: "fail",
      message: error.desc || "修改失败",
      forbidClick: true,
      duration: 1000,
    });
  }
};
// 返回
const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.grid-content {
  // border: 1px solid #c1c5cd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 20px 0;
  background-color: white;
  padding-bottom: 1px;

  .grid-content-top-dec {
    padding: 0 10px;

    .grid-content-top-dec-p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-top: 0;

      .grid-content-top-dec-span {
        width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgb(147, 147, 147);
      }
    }
  }

  .grid-content-top-pic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .imgage {
      width: 58px;
      height: 58px;
      border-radius: 10px;
    }

    .grid-content-top-pic-right {
      margin-left: 10px;
      font-size: 12px;
    }
  }
}

.flexbetween {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}

.flexaround {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}

.flex {
  display: flex;
  align-items: center;
  align-content: center;
}
</style>
